<template>
  <div class="init">
    <!-- 轮播 -->
    <!-- touchable允许滑动 -->
    <van-swipe class="my-swipe" :loop="false" touchable @change="onChange">
      <van-swipe-item>
        <div class="pic">
          <img src="../../public/image/190.png" alt="" />
        </div>
        <!-- 文字板块 -->
        <div class="text">
          <h3>宠物诊所</h3>
          <p>做您宠物的健康使者</p>
        </div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="pic2">
          <img src="../../public/image/270@2x.png" alt="" />
        </div>
        <!-- 文字板块 -->
        <div class="text2">
          <h3>宠物诊所</h3>
          <p>做您宠物的健康使者</p>
        </div></van-swipe-item
      >
      <van-swipe-item>
        <div class="pic3">
          <img src="../../public/image/188@2x.png" alt="" />
        </div>
        <!-- 文字板块 -->
        <div class="text3">
          <h3>宠物诊所</h3>
          <p>做您宠物的健康使者</p>
        </div>
        <!-- btn -->
        <van-button class="start" round plain hairline type="primary" color="#FF522E" @click="tologin"
          >立即开启</van-button
        >
      </van-swipe-item>
      <!-- 自定义滑块 -->
      <template #indicator>
        <ul class="indicators indicator">
          <li v-for="(item, index) in 3" :key="index" :class="{ active: checkActive(index) }"></li>
        </ul>
      </template>
    </van-swipe>
  </div>
</template>
<script>
export default {
  data() {
    return {
      current: 0,
    }
  },
  methods: {
    // li获得active属性
    checkActive(index) {
      return index === this.current // current为监听的轮播index
    },
    // 滑动事件
    onChange(index) {
      this.current = index
    },
    // 跳转tologin
    tologin() {
      this.$router.push('/Login')
    },
  },
  components: {},
}
</script>
<style scoped lang="less">
// 1rem=50px

.init {
  width: 100%;
  height: 13.34rem;
  .my-swipe {
    width: 100%;
    height: 100%;

    .pic3 {
      width: 2.15rem;
      height: 2.91rem;
      margin-top: 4.13rem;
      margin-left: 2.68rem;
      img {
        width: 100%;
      }
    }
    .text3 {
      margin-top: 1.68rem;
      margin-left: 1.81rem;

      width: 3.94rem;
      height: 1.02rem;
      text-align: center;
      h3 {
        color: #ff522e;
        font-size: 0.43rem;
      }
      p {
        text-align: center;
        font-size: 0.29rem;
        color: #7f7f7f;
      }
    }
    //
    .pic2 {
      width: 2.72rem;
      height: 2.29rem;
      margin-top: 4.38rem;
      margin-left: 2.4rem;
      img {
        width: 100%;
      }
    }
    .text2 {
      margin-top: 2.05rem;
      margin-left: 2.15rem;

      width: 3.28rem;
      height: 1.02rem;
      text-align: center;
      h3 {
        color: #ff522e;
        font-size: 0.43rem;
      }
      p {
        text-align: center;
        font-size: 0.29rem;
        color: #7f7f7f;
      }
    }
    //
    .start {
      width: 2.37rem;
      height: 0.62rem;
      font-size: 0.34rem;
      line-height: 0.62rem;
      position: absolute;
      bottom: 1.66rem;
      left: 2.57rem;
    }
    .pic {
      width: 2.67rem;
      margin-top: 3.89rem;
      margin-left: 2.32rem;
      img {
        width: 100%;
      }
    }
    // text模块
    .text {
      margin-top: 2.04rem;
      margin-left: 2.15rem;

      width: 2.94rem;
      height: 1rem;
      text-align: center;
      h3 {
        color: #ff522e;
        font-size: 0.43rem;
      }
      p {
        text-align: center;
        font-size: 0.29rem;
        color: #7f7f7f;
      }
    }
  }
}
//
.indicators {
  position: absolute;
  bottom: 2.71rem;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
}

.indicator li {
  display: inline;
  width: 0.11rem;
  height: 0.11rem;
  background-color: #999999;
  border-radius: 20%;
  opacity: 0.5;
  transition: opacity 0.5s,
    //@animation-duration-fast
    background-color 0.5s; //@animation-duration-fast

  &:not(:last-child) {
    margin-right: 6px;
  }

  &.active {
    background-color: #ff522e;
    width: 0.3rem;
    opacity: 1;
  }
}
//
</style>
